<template>
  <div class="Contacts">
    <div class="lay">
      <!-- 左 -->
      <div class="list">
        <ul v-for="(arr, index) in list" :key="index">
          <!-- 名字 -->
          <li class="classify">
            <div class="color">{{ letter[index] }}</div>
          </li>
          <!-- 人物 -->
          <li
            class="person"
            v-for="item in arr"
            :key="item.id"
            @click="color(item)"
            :class="{ active: setcolor == item.id }"
          >
            <div class="left">
              <img :src="item.img" />
            </div>
            <div class="right">
              <div class="top">{{ item.name }}</div>
              <div class="bottom">{{ item.relationship }}</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 右 -->
      <div class="count">
        <div class="c-lay">
          <!-- 背景 -->
          <div class="bg">
            <!-- 图标 -->
            <div class="icon">
              <div class="left1">
                <i class="iconfont icon-shoucang"></i>
              </div>
              <div class="left1">
                <i class="iconfont icon-xiugai"></i>
              </div>
              <div class="left1">
                <i class="iconfont icon-more-fill"></i>
              </div>
            </div>
            <!-- 头像 -->
            <div class="person-box">
              <div class="person">
                <img :src="list3.img" />
              </div>
            </div>
          </div>
          <!-- 内容 -->
          <div class="cont">
            <div class="name">
              <h2>{{ list3.name }}</h2>
              <div class="relationship">
                <span>{{ list3.relationship }}</span>
              </div>
              <div class="ca">
                <div class="mess">
                  <i class="iconfont icon-xinxi"></i>
                  <span>Message</span>
                </div>
                <div class="mess">
                  <i class="iconfont icon-dianhua"></i>
                  <span>Voice Call</span>
                </div>
                <div class="mess">
                  <i class="iconfont icon-video"></i>
                  <span>Video Call</span>
                </div>
              </div>
            </div>
            <div class="bq">Personal & Contact Information</div>
            <ul class="list-un">
              <li v-for="(item, index) in list2" :key="index">
                <div class="left">{{ item.left }}</div>
                <div class="right">{{ item.right }}</div>
              </li>
            </ul>
            <div class="bq">Personal & Contact Information</div>
            <ul class="list-un">
              <li v-for="(item, index) in list2" :key="index">
                <div class="left">{{ item.left }}</div>
                <div class="right">{{ item.right }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      letter: ['Favourite', 'A', 'B', 'D', 'G', 'M', 'S', 'Z', '#'],
      list: [
        [
          {
            img: require('./img/Contacts/index1.png'),
            name: 'Jack P. Angulo',
            relationship: 'Brother',
            id: 1,
          },
          {
            img: require('./img/Contacts/index2.png'),
            name: 'Willie McLaughlin',
            relationship: 'Sister',
            id: 2,
          },
          {
            img: require('./img/Contacts/index3.png'),
            name: 'Andrew Showalter',
            relationship: 'Father',
            id: 3,
          },
        ],
        [
          {
            img: require('./img/Contacts/index4.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 4,
          },
          {
            img: require('./img/Contacts/index5.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 5,
          },
        ],
        [
          {
            img: require('./img/Contacts/index6.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 6,
          },
          {
            img: require('./img/Contacts/index7.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 7,
          },
        ],
        [
          {
            img: require('./img/Contacts/index8.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 8,
          },
          {
            img: require('./img/Contacts/index9.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 9,
          },
        ],
        [
          {
            img: require('./img/Contacts/index10.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 10,
          },
          {
            img: require('./img/Contacts/index11.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 11,
          },
        ],
        [
          {
            img: require('./img/Contacts/index12.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 12,
          },
          {
            img: require('./img/Contacts/index13.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 13,
          },
        ],
        [
          {
            img: require('./img/Contacts/index15.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 14,
          },
          {
            img: require('./img/Contacts/index8.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 15,
          },
        ],
        [
          {
            img: require('./img/Contacts/index16.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 16,
          },
          {
            img: require('./img/Contacts/index2.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
          },
        ],
        [
          {
            img: require('./img/Contacts/index3.png'),
            name: 'Marguerite Sorrentino Hutchings',
            relationship: 'Co-Workers',
            id: 17,
          },
          {
            img: require('./img/Contacts/index4.png'),
            name: 'Earnest Clements',
            relationship: 'Co-Workers',
            id: 18,
          },
        ],
      ],
      setcolor: 1,
      list2: [
        { left: 'Nick name', right: 'Eva' },
        { left: 'Gender', right: 'Female' },
        { left: 'Birth date', right: '20/12/2016' },
        { left: 'Mobile number ', right: '+01 369 2015' },
        { left: 'Email ', right: 'earnest.clements@email.com' },
        { left: 'Website ', right: 'www.earnestclements.com' },
      ],
      list3: {
        img: require('./img/Contacts/index1.png'),
        name: 'Jack P. Angulo',
        relationship: 'Brother',
        id: 1,
      },
    }
  },
  methods: {
    color(item) {
      this.setcolor = item.id
      this.list3 = item
      console.log(this.list3)
    },
  },
}
</script>

<style lang="scss" scoped>
// @import url('./icon.css');
* {
  margin: 0;
  padding: 0;
}
.Contacts {
  margin-left: 5rem;
  margin-top: 72px;
  width: 100%;
  .lay {
    width: 100%;
    display: flex;
    // 左边
    .list {
      width: 404px;
      height: calc(100vh - 4.5625rem);
      border: 1px solid #dadce0;
      background: #fff;
      overflow: hidden;
      overflow-y: scroll;
      ul {
        list-style: none;
        flex-direction: column;
        // 头像
        .classify {
          width: 96px;
          height: 38px;
          border-radius: 0 1.5625rem 1.5625rem 0;
          background: #ecddfa;
          font-size: 0.9375rem;
          cursor: pointer;
          align-items: center;
          .color {
            padding: 0.625rem 1rem;
            font-weight: 700;
            font-size: 0.75rem;
          }
        }
        // 名字
        .person {
          width: 100%;
          height: 83px;
          box-sizing: border-box;
          padding: 1rem 1rem 1rem 1.5rem;
          display: flex;
          border-bottom: 1px solid #dadce0;
          color: #3e4247;
          .left {
            margin-right: 2rem;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
          }
          .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            .top {
              font-weight: bold;
              line-height: 1.25rem;
              font-size: 15px;
            }
            .bottom {
              font-size: 12px;
            }
          }
        }
        .active {
          background: #f7f2fb;
          color: #ae6eea;
          border-bottom: 2px solid #ae6eea;
        }
      }
    }
    .list::-webkit-scrollbar {
      display: none;
    }
    .count {
      width: 78%;
      height: 92.2vh;
      overflow: hidden;
      overflow-y: scroll;
      .c-lay {
        max-width: 1140px;
        margin: 0 auto;
        height: 500px;
        // 背景
        .bg {
          width: 100%;
          height: 16.25rem;
          background: url('./img/Contacts/bg.jpg');
          position: relative;
          // 图标
          .icon {
            position: absolute;
            display: flex;
            align-items: center;
            width: 108px;
            height: 36px;
            background: white;
            right: 10px;
            top: 10px;
            border-radius: 25px;
            .left1 {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              line-height: 36px;
              text-align: center;
              transition: all 0.5s;
              i {
                font-size: 20px;
                color: black;
              }
            }
            .left1:hover {
              background: #dadce0;
            }
          }
          // 头像
          .person-box {
            width: 160px;
            height: 160px;
            margin: 0 auto;
            .person {
              width: 160px;
              height: 160px;
              border-radius: 50%;
              border: 0.25rem solid #f8f9fa;
              position: absolute;
              bottom: -46px;
              overflow: hidden;
              img {
                width: 160px;
                height: 160px;
              }
            }
          }
        }
        // 内容
        .cont {
          overflow: hidden;
          width: 100%;
          height: 870px;
          border: 1px solid #dee2e6;
          box-sizing: border-box;
          padding-top: 3.125rem;
          .name {
            width: 100%;
            height: 95px;
            text-align: center;
            .relationship {
              font-size: 0.8125rem;
            }
            .ca {
              width: 375px;
              box-sizing: border-box;
              padding-top: 0.5rem;
              display: flex;
              margin: 0 auto;
              .mess {
                width: 118px;
                height: 38px;
                border-radius: 25px;
                border: 1px solid #dee2e6;
                box-sizing: border-box;
                padding: 0 0.9375rem 0 0.625rem;
                align-items: center;
                line-height: 38px;
                margin-right: 5px;
                i {
                  font-size: 18px;
                  margin-right: 8px;
                  color: #9e9e9e;
                }
                span {
                  font-size: 12px;
                  color: #9e9e9e;
                }
              }
            }
          }
          .bq {
            background: #ae6eea;
            color: #fff;
            width: 238px;
            height: 38px;
            box-sizing: border-box;
            padding: 0.625rem 0.9375rem 0.625rem 0.625rem;
            border-radius: 0 1.5625rem 1.5625rem 0;
            font-size: 0.75rem;
          }
          .list-un {
            list-style: none;
            li {
              width: 100%;
              height: 54px;
              border-bottom: 1px solid #dadce0;
              box-sizing: border-box;
              padding: 0.625rem 1.25rem;
              font-size: 12px;
              align-items: center;
              line-height: 34px;
              .left {
                float: left;
                font-weight: bold;
              }
              .right {
                float: right;
              }
            }
          }
        }
      }
    }
    .count::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
